/* Login Container (default to float:right) */
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
}

/* Login Button */
#loginButton { 
    display:inline-block;
    float:right;
    background:#d2e0ea;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
    position:relative;
    cursor:pointer;
    width:150px;
    text-align:center;
}

/* Login Button Text */
#loginButton p {
	background:#2869AE url(../img/template/loginArrow.png) no-repeat 157px 7px;
    color:#fff; 
    font-size:13px;
    padding:10px 20px 10px 5px;
    display:block;
	margin:0;
	-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: all 0.4s ease-out 0s;

}
#loginButton p.login{
	padding:7px 0 0 0;
	width:175px;
	display:block;
}
#loginButton p.login span{
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	display:block;
	width:110px;
	overflow:hidden;
	text-overflow: ellipsis;
}

#loginButton img{ margin:-5px 10px 3px 3px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; width:30px; height:30px; float:left;
}

#loginButton:hover p{
    background:#4187D3 url(../img/template/loginArrow.png) no-repeat 157px 7px;
}

/* Login Box */
#loginBox {
    position:absolute;
    top:34px;
    right:0;
    display:none;
    z-index:30;
}

/* If the Login Button has been clicked */    
#loginButton.active {
    border-radius:3px 3px 0 0;
}

#loginButton.active span {
    background-position:155px -76px;
}

/* A Line added to overlap the border */
#loginButton.active em {
    position:absolute;
    width:100%;
    height:1px;
    background:#d2e0ea;
    bottom:-1px;
}

/* Login Form */
#loginForm {
    width:248px; 
    border-radius:3px 0 3px 3px;
    -moz-border-radius:3px 0 3px 3px;
    margin:-2px 1px 0 0;
    background:#666;
    padding:6px;
	-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.75);
}

#loginForm fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}

fieldset#body {
    background:#fff;
    border-radius:3px;
    -moz-border-radius:3px;
    padding:10px 13px;
    margin:0;
}

#loginForm #checkbox {
    width:auto;
    margin:1px 9px 0 0;
    float:left;
    padding:0;
    border:0;
}

#body label {
    color:#3a454d;
    margin:9px 0 0 0;
    display:block;
    float:left;
}

#loginForm #body fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
}

/* Default Input */
#loginForm input {
    width:92%;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:3px;
    color:#3a454d;
    font-weight:bold;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    font-size:12px;
}

/* Sign In Button */
#loginForm #login {
    width:auto;
    float:left;
    background:#339cdf url(../img/template/home-search-ln.png) repeat-x;
    color:#fff;
    padding:7px 10px 8px 10px;
    text-shadow:0px -1px #278db8;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
}

/* Forgot your password */
#loginForm span {
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
	color:#808080;
	font-size:16px;
}

#loginForm span a {
    color:#fff;
    text-shadow:1px 1px #000;
    font-size:12px;
	transition: all 0.2s ease-out 0s;
}
#loginForm span a:hover {
	text-shadow:none;
}

input:focus {
    outline:none;
}

#user-set {
    width:200px; 
    border-radius:3px 0 3px 3px;
    -moz-border-radius:3px 0 3px 3px;
    margin:-2px 1px 0 0;
    background:#fff url(../img/template/header-bg.png) top left repeat-x;
    padding:6px;
	-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.75);
}

#user-set ul{ margin:10px ; padding:0; list-style:none;}
#user-set ul li{ margin:6px 0;  padding:3px 0 4px 27px;}
#user-set ul li a{ color:#333; font-size:13px;}
#user-set ul li a:hover{ color:#2869AE;}
#user-set ul li.profil-dd{ background:url(../img/template/profil.png) no-repeat; border-bottom:1px dotted #ccc}
#user-set ul li.edit-profil-dd{ background:url(../img/template/edit-profil.png) no-repeat; border-bottom:1px dotted #ccc}
#user-set ul li.my-friends-dd{ background:url(../img/template/friends-ico.png) no-repeat; border-bottom:1px dotted #ccc}
#user-set ul li.view-profil-dd{ background: url(../img/template/view-profil.png) no-repeat; border-bottom:1px dotted #ccc}
#user-set ul li.add-coins-dd{ background: url(../img/template/add-coins.png) no-repeat; border-bottom:1px dotted #ccc}
#user-set ul li.logout-dd{ background: url(../img/template/logout.png) no-repeat;}

#user-set ul li.my-spotlight-dd{ background:url(../img/template/spotlight-ico.png) no-repeat; border-bottom:1px dotted #ccc}